<!-- 
 
  商家店铺的商品 
 -->
<template>
	<view class="shop-goods-list" @tap="goGoodsDetail" :class="{'h-list':type == 1}">
		<view class="goods-img">
			<image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2144945483,4195021900&fm=26&gp=0.jpg" class="img" />
		</view>
		<view class="goods-content">
			<view class="goods-name">
				小米挨批送福利俺就是个大佬开个会爱上了房价暗示健康路附近阿三加快立法按实际付款了阿斯达阿斯达阿斯达
			</view>
			<view class="price-box">
				<text class="price-text">￥  511.99</text>
				<text class="del-price">￥ 699</text>
				<view class="buy-num">10000人付款</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"indexGoodsList",
		props:{
			item:{
				type:Object,
				default:{}
			},
			type:{
				type:Number,
				default:0
			}
		},
		methods:{
			goGoodsDetail(){
				let query = `?id=${this.item.id}`
				uni.navigateTo({
					url:"/pages/goods/detail" + query,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			goShopDetail(){
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.shop-goods-list{
		width: 100%;
		.goods-img{
			width: 100%;
			height: 45vw;
			max-height: 1080rpx;
			.img{
				width: 100%;
				height: 100%;
				border-radius: 12rpx 12rpx 0 0;
			}
		}
		.goods-content{
			padding: 14rpx;
		}
		.goods-name{
			font-size: 24rpx;
			word-break: break-all;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			font-weight: bold;
			height: 70rpx;
		}
		.price-box{
			margin-top: 14rpx;
			line-height: 1.3;
			.price-text{
				font-size: 32rpx;
				color: #fa436a;
				font-weight: bold;
			}
			.del-price{
				font-size: 22rpx;
				color: #a0a0a0;
				text-decoration: line-through;
				padding-left: 14rpx;
				
			}
			
		}
		.shop-name{
			color: #999999;
			font-size: 24rpx;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
		}
		.buy-num{
			color: #888888;
			font-size: 20rpx;
			display: none;
		}
		&.h-list{
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			.goods-img{
				min-width: 200rpx;
				max-width: 200rpx;
				height: 200rpx;
				.img{
					border-radius: 0;
				}
			}
			.price-box{
				padding-top: 0;
				padding-top: 20rpx;
			}
			.buy-num{
				display: block;
				text-align: right;
				line-height: 1.3;
			}
		}
	}
	
</style>
